@import "base/rest-weui";
@import "base/global";
@import "btn/btn-weui";
@import "components/ranking-list";
@import "components/m-turnplate";

@import "base/animate";
@import "components/grade-stars";


/*颜色*/
@import "mixins/colors";
@import "mixins/m-global";


.m-page-header{
  z-index: 10;
  position: relative;
}
.swiper-container {
  width: 100%;
  height: 10rem;
  border-bottom:1px solid #DADADA;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.p-waiter-info.swiper-container{
  border-bottom:none;
}
.swiper-slide{
  position: relative;
  overflow: hidden;
  background-color:#fff;
  img{
    width:100%;
    height:auto;
    @extend %transform--center;
  }
}
.p-waiter-info .swiper-slide img{
  width:auto;
  height:100%;
  position: relative;
  z-index:2;
}
.p-waiter-info .swiper-slide .js-slide-bg{
  width:100%;
  height:auto;
  -webkit-filter: blur(10px); /* Chrome, Opera */
  -moz-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: 0;
}
/*地址工具栏*/
.m-address-bar{
  border-bottom:1px solid #DADADA;
  background-color:#fff;
  &>div{
    padding:.3rem .2rem;
  }
}
.m-address-bar_city,
.m-address-bar_search{
  display:block;
}
.m-address-bar_city{
  position:relative;
  display: block;
  text-align: center;
  padding:0 .2rem;
  width:3.5rem;
  border-radius: .2rem;
  height:100%;
  line-height: 1.5rem;
  @extend %text-overflow--e;
  &:not(.weui-btn_disabled):active {
    //color: hsla(0,0%,100%,.6);
    background-color: #F4F4F4
  }
  .iconfont{
    position: absolute;
    display: block;
    font-size:.2rem;
    right:-.1rem;
    bottom:-.6rem;
    color:$content_color;
  }
  input{

    font-size:.6rem;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
  }
  span{
    color:#858482;
    font-size:.7rem;
  }
}
.m-address-bar_input-group{
  position: relative;
  label{
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    text-align:center;
    font-size:0.6rem;
    line-height: 2.1rem;
    color:#C0C0C0;
    text-indent: -1rem;
  }
  .p-address_more{
    border:0;
    height:100%;
    min-height:1.5rem;
    width:100%;
    padding:0 .5rem;
    background-color:#F4F4F4;
    border-radius: .25rem;
  }
}
/*主要内容-列表项*/
.m-container-wrap{
  position: absolute;
  top:0;
  overflow-y: auto;
  height:100%;
  width:100%;
  z-index: 0;
  &.p-index{
    padding:{
      top:12.5rem;
    }
  }
  &.p-waiter{
    padding:{
      top:10.5rem;
    }
  }
}
.p-index .weui-media-box__hd{
  overflow: hidden;
  position: relative;
}
.p-index .weui-media-box__hd img{
  height:100%;
  width:auto !important;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.m-container-wrap.p-waiter {
  padding-top: 10.5rem;
}
.m-container{

  border:{
    top:1px solid #D4D4D4;
    bottom:1px solid #D4D4D4;
  }

}
$weui-media-box-p:.4rem .5rem .3rem;
.m-weui-panel--shop{
  .weui-media-box{
    position: relative;
    padding:$weui-media-box-p;
    align-items: flex-start;
  }
  .icon-enter{
    $icon_font:1.2rem;
    $icon_mt:$icon_font;
    position: absolute;
    font-size:$icon_font;
    top:50%;
    margin-top:- $icon_mt;
    right:.2rem;
    color:#B3B3B3;
  }
  .weui-media-box__hd{
    $box__hd-wh:5.8rem;
    width:$box__hd-wh;
    height:$box__hd-wh
  }
  .weui-media-box__bd{
    position: relative;
    padding:{
      right:1rem;
      bottom:1.5rem;
    }
  }
  .weui-media-box__title{
    font-size:.8rem;
    line-height: 1.5;
    margin-bottom:.4rem;
  }
  .m-media_box_help.g-c--orange{
    color:#E2CAB0;
    margin-bottom:.5rem;
    font-size:12px;
  }
}

.m-info-help{
  position: absolute;
  bottom:0;
  width:100%;
  padding-right:.3rem;
}
.m-help-text{
  color:#BFBFBF;
  font-size:12px;
}
/*waiter---------------------------------------------------------------------------------*/
.m-info-bar{
  position: absolute;
  bottom:0;
  width:100%;
  background-color:rgba(0,0,0,.6);
  color:rgba(255,255,255,.75);
  z-index: 5;
  padding:.2rem 0;
}
.m-info_title{
  padding:0 .3rem;
  h2{
    font-size:.8rem;
    line-height: 1.4rem;
    font-weight:400;
  }

}
.m-info_address{
  font-size:12px;
  line-height: 2.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.m-info_collection{
  width:2rem;
  text-align: center;
  .iconfont{
    font-size:1rem;
    line-height: 1.5rem;
  }
  .icon-wujiaoxing-copy{
    color:#FF6600;
  }
}
.m-weui-panel--waiter{
  .weui-media-box{
    position: relative;
    padding:$weui-media-box-p;
    align-items: flex-start;
    padding-bottom:1.7rem;
  }
  .icon-enter{
    $icon_font:1.2rem;
    $icon_mt:$icon_font;
    position: absolute;
    font-size:$icon_font;
    top:50%;
    margin-top:- $icon_mt;
    right:.2rem;
    color:#B3B3B3;
  }
  .weui-media-box__hd{
    $box__hd-wh:5.5rem;
    width:$box__hd-wh;
    height:$box__hd-wh
  }
  .weui-media-box__bd{
    position: relative;
    padding:{
      right:1rem;
    }
  }
  .weui-media-box__title{
    font-size:.8rem;
    line-height: 1.5;
    margin-bottom:.2rem;
  }
  .m-media_box_help.g-c--orange{
    color:#E2CAB0;
    margin-bottom:.5rem;
    font-size:.8rem;
  }
}
//评价
.m-grade-wrap{
  position: absolute;
  bottom:.3rem;
  left:.8rem;
}
.m-grade-label{
  display:inline-block;
  vertical-align: middle;
  color:#CFCFCF;
  font-size:.75rem;
}
.m-grade-btn>img.p-hide{
  display:none;
}
li.active .m-grade-btn>img.p-hide{
  display:block !important;
}
li.active .m-grade-btn>img{
  display:none;
}
//技师状态图案
.p-waiter--waiting{
  position: absolute;
  top:40%;
  right:8%;
  height:3.2rem;
}
//打赏数量
.p-gift{
  position: absolute;
  right:.5rem;
}
.p-gift-img,
.p-gift-text{
  display:inline-block;
  vertical-align: bottom;
}
.p-gift-img{
  width:1.2rem;
}
.p-gift-text{
  color:#D97333;
  font-size:.7rem;
}
//技师详情页
.p-waiter-info{
  height:18rem;
}
.p-title-info{
  position: relative;
  padding:1px 0;

  .p-title-info_text{
    background-color:#fff;
    display:inline-block;
    position: absolute;
    top:48%;
    left:50%;
    @extend %transform--center;
    font-size:.8rem;
    font-weight:400;
    padding:{
      left:.5rem;
      right:.5rem;
    }
  }
}
.weui-panel--comment{
  .weui-media-box{
    position: relative;
    padding:$weui-media-box-p;
    align-items: flex-start;
  }
  .m-comment_name{
    color:$color_orange_light;
    font-size:.7rem;
    margin-top:.4rem;
    margin-bottom:.4rem;
    line-height: 1;
  }
  .weui-media-box__desc{
    color:$content_color;
  }
}
.m-panel__hd_link{
  color:#999;
  display:block;
  position: absolute;
  right:0;
  height:100%;
  top:0;
  padding:{
    left:2rem;
    right:.5rem;
  }
  &:active{
    color:$content_color;
    background-color:rgba(0,0,0,.05);
  }
  span{
    display:inline-block;
    vertical-align: middle;
    margin-top:-6px;
  }
  i{
    display:inline-block;
    font-size: .9rem;
    line-height: 44px;
    color:#C9C9CE;
    margin-left:5px;
  }
}
.p-box-info{
  padding:.3rem .5rem 1rem;
}
.m-list--text{
  color:$content_color;
  font-size:14px;
  line-height: 1.8;
}
/*waiter-info-----------------------------------------------------------------------------*/
$avatar_wh:3rem;
.m-avatar{
  width:$avatar_wh;
  height:$avatar_wh;
  img{
    width:100%;
    height:100%;
  }
}
span.m-avatar{
  display:inline-block;
  vertical-align: middle;
}
.m-waiter-group{
  padding:.5rem .7rem;
  .m-avatar{
    margin-right:.5rem;
  }
  .m-waiter_title{
    margin-top:.1rem;
    margin-bottom:.2rem;
  }
  .m-waiter_side{
    font-size:.7rem;
    color:$color_orange_light;
  }
  .p-gift{
    top:1.4rem;
    right:.7rem;
  }
  .p-gift-text{
    font-size:.7rem;
  }
}
$avatar-sm-wh:2.5rem;
.m-avatar--sm{
  @at-root &.m-avatar{
    width:$avatar-sm-wh;
    height:$avatar-sm-wh;
  }
}
.weui-panel--comment.weui-panel--comment--more{
  .weui-media-box{
    padding:{
      top:.8rem;
      bottom:2rem;
    }
  }
  .m-grade-wrap{
    bottom:.7rem;
  }
}
.m-list-num{
  position: absolute;
  font-size: .7rem;
  color:$color_orange_light;
  right:.5rem;
  top:.8rem;
}
.m-comment-time{
  font-size:.6rem;
  color:#B4B4B4;
  position: absolute;
  bottom:.7rem;
  right:.5rem;
}

/*收藏页面------------------------------------------------------------------------------*/
.p-weui-navbar--foot-bath{
  .weui-bar__item_on,
  .weui-bar__item--on{
    color:$color_orange_dark;
    border-bottom:2px solid $color_orange_dark;
    background-color:#fff;
  }
}
/*打赏详情页*/
.p-msg-text{
  color:$content_color;
  font-size:.7rem;
  span{
    margin:{
      left:.3rem;
      right:.3rem;
    }
  }
}
.p-header--details{
  position: relative;
  text-align: center;
  padding:2rem 0 1rem;
  background-color:#fff;
  .m-question-link{
    .iconfont{
      font-size:1.5rem;
    }
  }
  .m-question-link{
    position: absolute;
    top:.5rem;
    right:.5rem;
  }
}
.p-total-money{
  color:#E62B4A;
  font-size:1.6rem;
  margin-top:.2rem;
}
.m-question-link{
  display:inline-block;
  line-height: 1;
  color:#FF6600;
  .iconfont{
    font-size:1rem;
  }
}
/*抽奖和评论页面----------------------------------------------------------------*/
.p-draw-content-p{
  padding:.2rem;
  text-align:center;
  margin-bottom:.5rem;
  .iconfont{
    font-size:2.8rem;
    color:$color_orange_dark;
  }
  p{
    font-size:.9rem;
  }
}
.p-draw-group{
  text-align: center;
  font-size:.9rem;
  .weui-btn{
    vertical-align: middle;
    font-size:.8rem;
    border-radius:.8rem;
    box-shadow:1px 1px 10px 1px rgba(0,0,0,.3);
  }
  margin-bottom:1rem;
}
.p-draw{
  &.p-title-info{
    padding:{
      left:1rem;
      right:1rem;
    }
    .p-title-info_text{
      background-color:#F4F4F4;
    }
  }
}
.m-help-text--default{
  font-size:.8rem;
}
$font-size-grade-btn:2.5rem;
.m-grade-bar{
  display: flex;
  li{
    flex: 1;
    text-align: center;
    &:first-child{
      padding-left:0;
    }
    &.active{
      .iconfont{
        color:$color_orange_dark;
      }
    }
  }
  .m-grade-btn{
    display:inline-block;
    width:$font-size-grade-btn;
    height:$font-size-grade-btn;
    i{
      font-size:$font-size-grade-btn;
      line-height: 1;

    }
    img{
      width:100%;
      height:100%;
    }
  }
  .icon-wujiaoxing-copy{
    color:$color_form_border;
  }
}
.js-grade-text{
  margin-top:.4rem;
}
.p-draw-row{
  padding:{
    left:1rem;
    right:1rem;
  }
  margin-top:.5rem;
}
.m-form-label{
  margin-right:.2rem;
  vertical-align: middle;
  line-height: $font-size-grade-btn;

}
.m-input-group{
  position: relative;
  border:1px solid $color_form_border;
  border-radius: .2rem;
  background-color:#fff;
  .icon-xiangxiasanjiaoxialazhankai{
    position: absolute;
    font-size:2rem;
    color:$color_form_border;
    line-height: 1;
    right:0;
    top:50%;
    margin-top:-1rem;
  }
  .weui-select{
    height:$font-size-grade-btn;
    line-height: $font-size-grade-btn;
    color:$content_color;

  }
}
.m-textarea-group--bordered{
  &.m-textarea-group{
    border:1px solid $color_form_border;
    border-radius:.2rem;
  }
}
.p-draw-footer{
  margin-top:1.2rem;
}
/*半屏弹出层*/
.p-popup--grade{
  .weui-popup__modal{
    padding:{
      top:1rem;
      bottom:1rem;
    }
    background-color:rgba(255,255,255,.95);
    //border-top:1px solid #CECECE;
    box-shadow: 0 -1px 2rem 2px rgba(0,0,0,.15);
  }
  .p-title-info_text{
    background-color:rgba(255,255,255,.5) !important;
  }
}
/*抽奖转盘*/
.p-container-draw{
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0,-50%);
  transform: translate(0,-50%);
}
/*用户评论*/
.m-icon-grade{
  $wh-icon-grade:2rem;
  width:$wh-icon-grade;
  height:$wh-icon-grade;
  img{
    width:100%;
    height:100%;
  }
  &.p-icon-grade{
    margin:{
      top:.4rem;
      left:.25rem;
    }
  }
}
.m-container_footer,
.m-container-group{
  padding:.8rem 1rem 1rem;
}
/*员工端*/
.m-media-box--shop{
  padding: 0.4rem 0.5rem 0.3rem !important;
  .m-media_box_help.g-c--orange {
    color: #E2CAB0;
    margin-bottom: .5rem;
    font-size: 12px;
  }
}
.m-balance{
  background-color:$color_orange_dark;
  padding-bottom:1.5rem;
}
.m-balance-header{
  padding:{
    top:1.5rem;
    bottom:.5rem;
  }
}
.m-balance-title{
  font-size: 0;
  img{
    display:block;
    width:90%;
    margin: 0 auto;
  }
}
.m-balance-total{
  text-align: center;
  color:#fff;
  font-size:2rem;
  small{
    font-size: .9rem;
    margin-left:.5rem;
  }
}
.m-balance-btn-group{
  margin-top:.5rem;
  li{
    &:first-child{
      border-right:1px solid #fff;
    }
  }
  .weui-btn{
    line-height: 2.2;
    font-size:.75rem;
    width:70%;
  }
}
.p-btn-money{
  background-color:#fff;
  border-color:#fff;
  color:$color_orange_dark
}
.p-btn-money-info{
  color:#fff;
  border-color:#fff;
}
/*员工提现----------------------------------------------------*/
.m-media-hd{
  margin-right:1rem;
  text-align: center;
  i{
    font-size: 2rem;

  }

  span{
    display:block;
    font-size:.7rem;
    margin-top:-.25rem;
  }
}
.m-media-hd{
  .icon-icon-alipay{
    color:#0AAAF0;
  }
  .icon-weixinzhifu{
    color:#59B64C;
  }
  .icon-yinhangqia{
    color:#FF5770;
  }
}
.p-shop-thumb-group{
  overflow: hidden;
  position: relative;
}
.p-shop-thumb-group .weui-media-box__thumb{
  height:100%;
  width:auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
@media screen and (max-width:375px){
  #js-btn-pay{
    font-size:.8rem;text-align:center;
    padding-left:0;
    padding-right:0;
  }
  /*.p-reward-help-wrap{
    overflow-y:auto;height:3.5rem;
  }*/
  .p-reward-help-wrap p,
  .p-reward-input-group{
    font-size:12px;
  }
  .p-reward-help-wrap h4{
    font-size:14px;
  }
  .p-footer--reward .m-modal_body{
    padding-bottom:9.5rem;
  }
  .p-footer--reward .m-modal_footer{
    height:9.5rem;
  }
  .m-reward-list li{
    width:33.33%;
  }
  .p-reward-input-group .p-reward-input{
    height:1.5rem;
  }
  .p-reward-input-group .p-reward-input input{
    height:1rem;
  }
  .m-input-group .icon-xiangxiasanjiaoxialazhankai{
    right:-.5rem;
    color:#7d7a7a;
  }
  .m-input-group .weui-select,
  .m-form-label{
    height: 1.5rem;
    line-height:1.5rem;
  }
  .m-input-group .weui-select{
    padding-left:3px;
  }
  .m-textarea-group textarea{
    height:2rem;
  }
  .p-draw-footer .weui-btn{
    margin-top:.5rem;
    font-size:16px;
    line-height:2;
  }
  .p-draw-footer{
    margin-top:.5rem;
  }
  .p-title-info .p-title-info_text{
    padding-left:0;
    padding-right:0;
  }
  .m-grade-bar .m-grade-btn{
    width:2.1rem;
    height:2.1rem;
  }
}